<template>
  <div style="height: 100%;width: 100%;">
    <split-pane :min-percent="20" :default-percent="100" split="horizontal">
      <template slot="paneL">
        <div class="pneleft view">
            <div class="m-b-15 view flex-row flex-1">
                <div class="pan_rig">
                  <div class="pan_rig_top">
                    <div class="pan_rig_to_zi p-l-5">
                      <button class="butt_cha " @click="edit()">修改</button>
                      <button class="butt_cha" @click="del()">删除</button>
                    </div>
                  </div>
                  <div class="data_lst p-l-10 p-r-10">
                    <el-table
                      size="mini"
                      highlight-current-row
                      @row-click="handleSelect"
                      :data="tableData"
                      ref="traditionRef"
                      :max-height="getH"
                      border
                      style="width: calc(100vw - 510px)">
                      <el-table-column
                        prop="id"
                        align="center"
                        label="编号">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        align="center"
                        label="状态">
                          <template slot-scope="scope">
                            <div  class=" fz-14 C_333 color_g" v-if="scope.row.istrig == 1 ">{{ scope.row.istrig == 1 ? '已触发':'未触发'}}</div>
                            <div  class=" fz-14 C_333 color_r" v-else>{{ scope.row.istrig == 1 ? '已触发':'未触发'}}</div>
                          </template>
                      </el-table-column>

                      <el-table-column
                        prop="term"
                        align="center"
                        min-width="200"
                        label="条件">
                      </el-table-column>

                      <el-table-column
                        prop="address"
                        align="center"
                        label="下单类型">
                          <template slot-scope="scope">
                            <div  class=" fz-14 C_333">{{ scope.row.ptype == 2 ? '限价':'市价'}}</div>
                          </template>
                      </el-table-column>

                      <el-table-column
                        prop="cfprice"
                        align="center"
                        label="触发价格">
                      </el-table-column>

                      <el-table-column
                        prop="risefall"
                        align="center"
                        label="买卖">
                        <template slot-scope="scope">
                            <div  class=" fz-14 C_333">{{ scope.row.risefall == 'rise' ? '买':'卖'}}</div>
                          </template>
                      </el-table-column>

                      <el-table-column
                        prop="buysale"
                        align="center"
                        label="开平">
                        <template slot-scope="scope">
                            <div  class=" fz-14 C_333">{{ scope.row.buysale == 'buy' ? '开':'平'}}</div>
                          </template>
                      </el-table-column>

                      <el-table-column
                        prop="tonum"
                        align="center"
                        label="数量">
                      </el-table-column>
                      <el-table-column
                        prop="note"
                        align="center"
                        label="备注">
                      </el-table-column>

                      <el-table-column
                        prop="vtype"
                        align="center"
                        label="有效期">
                        <template slot-scope="scope">
                            <div  class=" fz-14 C_333">{{ scope.row.vtype == 0 ? '当日有效':'永久有效'}}</div>
                          </template>
                      </el-table-column>

                      <el-table-column
                        prop="createtime"
                        align="center"
                        min-width="120"
                        label="创建时间">
                          <template slot-scope="scope">
                            <div  class=" fz-14 C_333">{{ moment.unix(scope.row.createtime).format('YYYY-MM-DD')}}</div>
                          </template>
                      </el-table-column>

                    </el-table>
                  </div>
                </div>
            </div>
          
        </div>
      </template>
    </split-pane>

    <edit-trad ref="edit" @fetch-data="getList"></edit-trad>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment'
import editTrad from './edit-trad'
export default {
  components: {
    editTrad
  },
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist, /* 全部合约代码 */
    userInfo: state => state.userInfo,
    zijinSet: state => state.zijinSet,
    getH: function () {
      console.log(window.innerHeight * .2)
      return window.innerHeight * .35
    }
  }),
  watch: {
    ticket:{
　　　　handler: function(val) {
          this.holdlist = this.holdlist.map( item => {
          let currentItem = val.find( data => {
            return  data.M + data.S + data.C == item.contract
          })
          if (currentItem) {
            if (item.risefall == 'rise') {
                item.newPrice = currentItem.S1
            } else {
                item.newPrice = currentItem.B1
            }
            item = {...item, ...currentItem}
          }
          let yk = this.getYK(item)
          item.yk = yk
          return item
        })
        let fudong = 0
        if (this.holdlist.length == 0) {
              let keyong = this.userInfo.money
              let quanyi = this.userInfo.score
              let fengxiandu = (parseFloat(Number(this.userInfo.margin) / quanyi) * 100).toFixed(2)
              this.$store.commit('set',{zijinSet:{
                  keyong: keyong,
                  quanyi: quanyi,
                  fudong: 0,
                  fengxiandu: fengxiandu
              }});
        }
        this.holdlist.forEach( item => {
            let ra = this.userInfo.rate.find( e => e.curreny == item.currency)
          
            if (ra) {
              fudong = parseFloat(fudong + Number(item.yk) * ra.rate) 
              let keyong = parseFloat(Number(this.userInfo.money) + fudong)
              let quanyi = parseFloat(Number(this.userInfo.score) + fudong)
              let fengxiandu = (parseFloat(Number(this.userInfo.margin) / quanyi) * 100).toFixed(2)
              this.$store.commit('set',{zijinSet:{
                  keyong: keyong,
                  quanyi: quanyi,
                  fudong: fudong,
                  fengxiandu: fengxiandu
              }});
            }
           
        })
　　　　},
      immediate: true,
　　　 deep:true
　　},
  },
  data() {
    return {
      holdlist: [],
      moment: moment,
      selectItem: {},
      timer: null,
      tableData: []
    };
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  created: function() {
    this.getList();
    if (this.timer) {
      clearInterval(this.timer)
    }
    this.timer = setInterval( () => {
      this.getList();
    }, 5000)
    this.chicanglist()
  },
  methods: {
    handleSelect(row) {
      const index = this.tableData.findIndex( item => item.id == row.id)
      if (index >= 0) {
        this.tableData[index].checked = true
        this.selectItem = row
      }
      
    },
    getYK(item) {
      let dc = 0
      if (!item || !item.N) {
        return dc
      }
      let p = 0
      if (item.risefall == 'rise') {
          if (item.N.indexOf('日元') > -1) {
            dc = isNaN((item.newPrice - item.openpriceavg)) ? 0:(item.newPrice - item.openpriceavg).toFixed(7)
          } else if (item.N.indexOf('欧元') > -1) {
            dc = isNaN((item.newPrice - item.openpriceavg)) ? 0:(item.newPrice - item.openpriceavg).toFixed(5)
          } else {
            dc = isNaN((item.newPrice - item.openpriceavg)) ? 0:(item.newPrice - item.openpriceavg).toFixed(3)
          }
          
          if (dc == 0) {
            p = 0
           
            return p
          }
          
          if (item.N.indexOf('日元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(7)
           
            return  p
          } else if (item.N.indexOf('欧元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(5)
           
            return  p
          } else {
            p =  (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(3)
           
            return p
          }
      } else {
          if (item.N.indexOf('日元') > -1) {
            dc = isNaN((item.openpriceavg - item.newPrice)) ? 0:(item.openpriceavg - item.newPrice).toFixed(7)
          } else if (item.N.indexOf('欧元') > -1) {
            dc = isNaN((item.openpriceavg - item.newPrice)) ? 0:(item.openpriceavg - item.newPrice).toFixed(5)
          } else {
            dc = isNaN((item.openpriceavg - item.newPrice)) ? 0:(item.openpriceavg - item.newPrice).toFixed(3)
          }
          
          if (dc == 0) {
            p = 0
           
            return p
          }
          if (item.N.indexOf('日元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(7)
           
            return  p
          } else if (item.N.indexOf('欧元') > -1) {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(5)
           
            return  p
          } else {
            p = (parseFloat(dc) / item.unit * item.volume * item.unitprice).toFixed(3)
           
            return  p
          }
      }
      
    },
    del() {
      if (!this.selectItem) {
        this.$notify.error('请选择一条记录！')
        return false
      }
      this.$layer.open({
        content: '确定删除该记录吗',
        btn: ['确定', '取消'],
        yes: (index, layero) => {
          //按钮【按钮一】的回调
           this.$post('order/taskorderdel', {taskid: this.selectItem.id}).then(res => {
              if (res.code == 1) {
                this.$layer.closeAll()
                this.$notify.success(res.msg);
                this.getList()
              }
            });
        },
        btn2: (index, layero) => {
          this.$layer.closeAll();
        },
        cancel: () => {
          this.$layer.closeAll();
        }
      });
      
    },
    /* 获取总订单列表 */
    chicanglist() {
      this.$get('order/sumorderlist').then(res => {
        this.holdlist = res.data;
      });
    },
    edit() {
      if (!this.selectItem) {
        this.$notify.error('请选择一条记录！')
        return false
      }
      if (this.selectItem.istrig == 1) {
        this.$notify.error('触发后不可修改')
        return false
      }
      this.$refs.edit.showEdit(this.selectItem)
    },  
    getList() {
       this.$get('/order/taskorderlist').then(res => {
         const arr = res.data.map( item => {
            const nowItem = this.tableData.find( it => it.id == item.id)
            if (nowItem && nowItem.checked) {
              item.checked = nowItem.checked
            } else {
              item.checked = false
            }
            return item
         })
         this.tableData = arr
         const it = this.tableData.find( item => item.checked)
         if (it) {
           this.$nextTick( () => {
            this.$refs.traditionRef.setCurrentRow(it)
          })
         }
         
       })
    }
  }
};
</script>

<style scoped lang="less">
/deep/.splitter-pane-resizer {display: none !important;}
/* 上方 */
.pneleft {
  width: 100%;
  height: 100%;
}
/* 上部分持仓分布 */
.pan_top.active {
  border-color: transparent;
  background: #3399ff;
  color: #fff;
}
.pan_top {
  width: 25px;
  cursor: pointer;
  background-color: #e3e2da;
  border: #888 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}
/* 上方表格部分 */
.pan_rig {
  width: calc(100% - 28px);
  height: 100%;
  background-color: #ffffff;
}
.pan_top {
  width: 35px;
}
/deep/ .el-table{
 * {
   color: #000;
 }
}
.color_g {
  color: #00dc00;
}
.color_r {
  color: #ff210d;
}
/deep/.el-table th{
background-color: #d8e2ea;
}
/* 上方表格按钮 */
.pan_rig_top {
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
/* 按钮盒子 */
.pan_rig_to_zi {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* 按钮 */
.butt_cha {
  width: 78px;
  height: 30px;
  cursor: pointer;
  transition: all ease .3s;
  border-radius: 5px;
  background-image: linear-gradient(to bottom, #fefefe, #f6f6f2, #e2dfd6);
  border: #ccc solid 1px;
  margin-right: 5px;
  margin-left: 3px;
}
.butt_cha:hover {
  border-color: #003c74;
  color: #003c74 !important;
  
 }
/* 表格内容盒子 */
.data_lst {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
/* 表格标题 */
.data_title {
  height: 28px;
  margin-top: 2px;
  width: 200%;
  border-left: 1px solid #e5e9ec;
}

/* 标题内部 */
.title_one {
  float: left;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border: #e5e9ec solid 1px;
  border-left:0;
  color: #000000;
  background-color: #d8e2ea;
}
/* 表格内容盒子 */
.data_info {
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 120px;
    max-height: 120px;
  box-sizing: border-box;
  padding-bottom: 20px;
  width: 200%;
  border: 1px solid #e5e9ec;
  border-top: 0;
}
/* 表格内容 */
.data_title_one {
  width: 100%;
  height: 28px;
}
.title_sone {
  float: left;
  color: #000000;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 8px;
  box-sizing: border-box;
}

.title_sone2 {
  color: #000000;
  height: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0 2px;
  box-sizing: border-box;
}

.title_red {
  color: #fe2424;
}

.title_green {
  color: #007f00;
}

.title_blue {
  color: #0000ff;
}

/* 下方显示 */
.pnerigh {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
/* 下边左侧 */
.pnerigh_title {
  width: 25px;
  height: 100%;
  background-color: #ffffff;
}

.rigtit_top {
  width: 25px;
  height: 50%;
  background-color: #e3e2da;
  border: #003c74 solid 1px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
}

.rigcan1 {
  background-color: #f7f7f7;
  color: #a0a0a0;
  margin-bottom: 15px;
}

/*持仓*/
.activess {
  background-color: #3399ff;
  color: #ffffff;
}
</style>
